<template>
  <div class="returned-money-container">
    <div
      class="table-top-container"
      style="margin-bottom:20px"
    >
      <el-row>
        <el-col :span="8">
          <el-button
            class="border-btn"
            size="mini"
          >新建回款</el-button>
        </el-col>
      </el-row>
    </div>
    <div
      class="info-container"
      style="margin-bottom: 20px;"
    >
      <el-row>
        <el-col :span="6">
          <div class="info-item">
            <div class="label">当前应收统计</div>
            <div class="value"><span>6,000元</span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <div class="label">流向总营销额</div>
            <div class="value"><span>+</span><span>6,000</span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <div class="label">总回款金额</div>
            <div class="value"><span>-</span><span>6,000</span></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="table-list">
      <el-table
        :data="listData"
        header-cell-class-name="table-header"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="流水号"
        />
        <el-table-column
          prop="name"
          label="上游营销对象"
        />
        <el-table-column
          label="地址"
          prop="回款金额"
        />
        <el-table-column
          prop="name"
          label="到账日期"
        />
        <el-table-column
          prop="name"
          label="创建人"
        />
        <el-table-column
          prop="name"
          label="创建时间"
        />
        <el-table-column
          prop="name"
          label="状态"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  setup(props, context) {
    var reactiveData = reactive({
      listData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
    })

    return {
      ...toRefs(reactiveData),
    }
  },
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
.returned-money-container {
  .info-container {
    .info-item {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .label {
        margin-right: 10px;
      }
      .value {
        color: $assist-color;
      }
    }
  }
}
</style>

